import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function Index() {
    useEffect(() => {
        console.log('Index => useEffect')
        return () => {
            console.log('index => 爱我别走')
        }
    }, [])
    return <h2>跳转 list</h2>
}

function List() {
    useEffect(() => {
        console.log('List => useEffect')
        return () => {
            console.log('List => 爱我别走')
        }
    })
    return <h2>跳转 index</h2>
}

const Demo3 = () => {
    // 数组解构
    const [count, setCount] = useState(0)
    useEffect(() => {
        console.log('useEffect =>' + count)
    }, [count])
    return (
        <div>
            <p>您点击了 {count} 次</p>
            <button
                onClick={() => {
                    setCount(count + 1)
                }}
            >
                加
            </button>

            <Router>
                <ul>
                    <li>
                        <Link to='/'>首页</Link>
                        <Link to='/list'>列表页</Link>
                    </li>
                </ul>
                <Route path='/' exact component={Index} />
                <Route path='/list' exact component={List} />
            </Router>
        </div>
    )
}

export default Demo3
